<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>js定时器上下自动切换</title>
    <style>
        body,ul,p,h3 { margin:0; padding:0; }
        em { font-style:normal; }
        li { list-style:none; }
        .clear { zoom:1; }
        .clear:after { content:''; display:block; clear:both; }
        /*---三角---*/
        .triangle_up,.triangle_down {  position:absolute;  width:0;  height:0;  overflow:hidden;  border-left:8px solid transparent;  border-right:8px solid transparent;  }
        .triangle_up {  border-bottom:8px solid #f1f7f8;  }
        .triangle_down{ border-top:8px solid #f1f7f8;  }
        .box{ width: 350px; height: 600px; border: 1px solid #c2c2c1; margin: 40px auto; border-radius: 5px;}
        .box h3{ width: 350px; height: 60px; background-color:#3c5678; color: #fff; font-size: 16px; line-height: 60px; text-indent: 20px;}
        .btn{ width: 350px;height: 40px;background-color: #e2ebea;}
        .btn div{ width: 28px; height: 28px; border-radius: 50%; background-color: #92a6b6; position: relative; top: 6px; left: 161px;}
        .btn a{ top:9px; left: 6px;}
        #list{ height:460px; overflow: hidden; position: relative;}
        #list li{ height: 75px;width: 350px; border-bottom: 1px solid #d1d0d2;position: absolute; left: 0px; line-height: 75px; text-align: left; }
        #list li img{ height: 73px; width: 70px; }
        #list li p{ position: absolute; left: 74px; top: 0px; }
    </style>
    <script>
        window.onload=function(){
            var oUl=document.getElementById("list");
            var oLi=oUl.getElementsByTagName("li");
            var oBtn1=document.getElementById("btn1");
            var oBtn2=document.getElementById("btn2");
            for(var i=0;i<oLi.length;i++){
                oLi[i].style.top=i*76+"px";
            }
            var num=0;
            var timer=null;
            oBtn1.onmousedown=function(){
                autoPlay(this,0)
            }
            oBtn1.onmouseup=function(){
                clearInterval(this.timer);
            }
            oBtn2.onmousedown=function(){
                autoPlay(this,1)
            }
            oBtn2.onmouseup=function(){
                clearInterval(this.timer);
            }
            function autoPlay(obj,fx){
                obj.timer=timer;
                clearInterval(obj.timer);
                obj.timer=setInterval(function(){
                    if((num==0 && fx==1)||(num==(oLi.length-6) && fx==0)){
                        clearInterval(obj.timer);
                    }else{
                        if(fx==1){
                             for(var i=0;i<oLi.length;i++){
                                oLi[i].style.top=parseInt(getStyle(oLi[i],"top"))+(parseInt(getStyle(oLi[i],"height"))+1)+"px";
                             }
                            num--;
                        }else{
                            for(var i=0;i<oLi.length;i++) {
                                oLi[i].style.top = parseInt(getStyle(oLi[i], "top")) - (parseInt(getStyle(oLi[i], "height")) + 1) + "px";
                            }
                            num++;
                        }
                    }
                },500)
            }
            function getStyle(obj,attr){
                return obj.currentStyle?obj.currentStyle[attr] : getComputedStyle(obj)[attr];
            }

        }
    </script>
</head>
<body>
    <div class="box">
        <h3>妙味课堂</h3>
        <div class="btn" id="btn1">
            <div>
                <a href="javascript:;" class="triangle_up"></a>
            </div>
        </div>
        <ul id="list">
            <li>
                <img src="img/content/hot1.gif"/>
                <p>习近平的“网上群众路线”</p>
            </li>
            <li>
                <img src="img/content/hot2.gif"/>
                <p>建设网络强国，习近平划下这些重点</p>
            </li>
            <li>
                <img src="img/content/hot3.gif"/>
                <p>筑牢新时代国家安全的网络“屏障”</p>
            </li>
            <li>
                <img src="img/content/hot4.gif"/>
                <p>美国应尊重中国发展的权利</p>
            </li>
            <li>
                <img src="img/content/hot5.gif"/>
                <p>坚守出来的美丽</p>
            </li>
            <li>
                <img src="img/content/hot6.gif"/>
                <p>好了伤疤忘了疼</p>
            </li>
            <li>
                <img src="img/content/hot7.gif"/>
                <p>曾回湘寻亲未果</p>
            </li>
            <li>
                <img src="img/content/hot8.gif"/>
                <p>上港年轻人还需要多磨练</p>
            </li>
            <li>
                <img src="img/content/hot9.gif"/>
                <p>“上海市五一新闻奖”揭晓</p>
            </li>
            <li>
                <img src="img/content/hot10.gif"/>
                <p>30名厅级以上干部被查</p>
            </li>
            <li>
                <img src="img/content/hot11.gif"/>
                <p>打工仔网恋女主播</p>
            </li>
            <li>
                <img src="img/content/hot1.gif"/>
                <p>习近平的“网上群众路线”</p>
            </li>
            <li>
                <img src="img/content/hot2.gif"/>
                <p>建设网络强国，习近平划下这些重点</p>
            </li>
            <li>
                <img src="img/content/hot3.gif"/>
                <p>筑牢新时代国家安全的网络“屏障”</p>
            </li>
            <li>
                <img src="img/content/hot4.gif"/>
                <p>美国应尊重中国发展的权利</p>
            </li>
            <li>
                <img src="img/content/hot5.gif"/>
                <p>坚守出来的美丽</p>
            </li>
            <li>
                <img src="img/content/hot6.gif"/>
                <p>好了伤疤忘了疼</p>
            </li>
            <li>
                <img src="img/content/hot7.gif"/>
                <p>曾回湘寻亲未果</p>
            </li>
            <li>
                <img src="img/content/hot8.gif"/>
                <p>上港年轻人还需要多磨练</p>
            </li>
            <li>
                <img src="img/content/hot9.gif"/>
                <p>“上海市五一新闻奖”揭晓</p>
            </li>
            <li>
                <img src="img/content/hot10.gif"/>
                <p>30名厅级以上干部被查</p>
            </li>
            <li>
                <img src="img/content/hot11.gif"/>
                <p>打工仔网恋女主播</p>
            </li>
        </ul>
        <div class="btn" id="btn2">
            <div>
                <a href="javascript:;" class="triangle_down"></a>
            </div>
        </div>
    </div>
</body>
</html>